<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>ECharts Bar</title>
    <style>
        html,
        body,
        #echarts {
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }

        /*隐藏滚动条*/
        html {
            overflow-x: hidden;
            overflow-y: hidden;
        }
    </style>
</head>

<body>
    <!-- 一般是一个具有高宽的div元素 -->
    <div id="echarts"></div>
    <!-- ECharts文件引入 -->
    <script src="echarts.js"></script>
    <script type="text/javascript">
        var worldMapContainer = document.getElementById('echarts');

        //窗体自适应
        var resizeWorldMapContainer = function () {
            worldMapContainer.style.width = window.innerWidth + 'px';
            worldMapContainer.style.height = window.innerHeight + 'px';
        };
        resizeWorldMapContainer();
        window.onresize = function () {
            resizeWorldMapContainer();
            myChart.resize();
        };

        //这里创建一个ECharts实例，返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例。
        //通过init设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，
        //ECharts 会合并新的参数和数据，然后刷新图表。
        //如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
        var myChart = echarts.init(worldMapContainer);
        //这里用一个列表来放渐变色
        var colorList = [
            //四个值分别代表右下左上，有数值是起点，一般写1方便计算
            //offset取值[0,1]，径向路径起点到终点的位置
            //从上到下
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "#FF0000"
                },
                {
                    offset: 1,
                    color: "#FFFF00"
                }
            ]),
            //从左到右
            new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: "#00FF00"
                },
                {
                    offset: 1,
                    color: "#00FFFF"
                }
            ]),
            //右上到左下
            new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
                    offset: 0,
                    color: "#FF0000"
                },
                {
                    offset: 0.5,
                    color: "#00FF00"
                },
                {
                    offset: 1,
                    color: "#0000FF"
                }
            ])
        ];
        //小圆点颜色列表
        var pointColorList = ['red', 'green', 'blue'];
        // 初始化设置
        myChart.setOption({
            //提示框
            tooltip: {

                //触发方式可以是坐标轴'axis'，数据项'item'
                trigger: 'axis',
                // 坐标轴指示器
                axisPointer: {
                    // 默认为直线'line'，可选为阴影'shadow'
                    type: 'shadow'
                },
                //提示内容的回调函数
                formatter: function (params) {
                    //嵌入html的方式自定义小圆点
                    var dot =
                        '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
                        pointColorList[params[0].dataIndex] + ';"></span>';
                    return params[0].data.type + "<br/> " +
                        dot + " total:" + params[0].data.total
                }
            },
            //网格
            grid: {
                //grid外的占比
                left: '1%',
                right: '1%',
                top: '3%',
                bottom: '3%',
                //grid 区域是否包含坐标轴的刻度标签
                containLabel: true
            },

            xAxis: {
                type: 'category',
                //可以指定参数的顺序，但是不会改变params[0].dataIndex顺序
                //data: ['总数', '在线', '离线'],
                //刻度label
                axisLabel: {
                    textStyle: {
                        color: '#c9c9ca'
                    }
                },
                //刻度线
                axisLine: {
                    lineStyle: {
                        color: '#c9c9ca',
                        width: 1
                    }
                },
                //坐标刻度相关
                axisTick: {
                    //刻度线和标签对齐
                    alignWithLabel: true
                }
                //设置字体倾斜
                /*axisLabel: {
                    interval: 0,
                    rotate: 45,
                    margin: 2,
                    textStyle: {
                        color: '#c9c9ca',
                        fontSize: '9',
                        fontFamily: 'PingFang-Sc-Heavy',
                    }
                }*/
            },
            yAxis: {
                //坐标轴在 grid 区域中的分隔线
                splitLine: {
                    show: true
                },
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: '#c9c9ca'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#c9c9ca',
                        width: 1
                    }
                }
            },
            //数据展示
            series: [{
                //柱状图
                type: 'bar',
                //柱子宽度在item宽度的占比
                barWidth: "45%",
                itemStyle: {
                    normal: {
                        //柱子颜色
                        color: function (params) {
                            return colorList[params.dataIndex];
                        }
                    }
                },
                //柱子上的label
                label: {
                    normal: {
                        show: true,
                        position: 'insideTop',
                        formatter: function (params) {
                            return params.data.size
                        }
                    }

                },
                //重新映射x轴和y轴的数据
                encode: {
                    x: ['type'],
                    y: ['total']
                }
            }],
            //ECharts 4 开始支持了 dataset 组件用于单独的数据集声明，
            //从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。
            dataset: {
                //临时用的数据
                source: [{
                    "type": "在线",
                    "total": 10,
                    "size": 20
                }, {
                    "type": "离线",
                    "total": 10,
                    "size": 20
                }, {
                    "type": "总数",
                    "total": 20,
                    "size": 40
                }]
            }
        });

        //将json数组作为参数进行动态设置
        function setChartData(jsonarray) {
            //alert(jsonarray)
            myChart.setOption({ //加载数据图表
                dataset: [{
                    source: jsonarray
                }]
            });
        };
    </script>
</body>
